<script setup>
import {ref} from "vue"
import { httpRequest } from "../../utils/http"
import {onReachBottom} from "@dcloudio/uni-app"

const cate1Id = ref(0)
const index = Number(uni.getStorageSync('index'))
const cate2Id = ref(uni.getStorageSync('shop')[index].shopCate2Obj.shopCate2Id||0)
const pageNum = ref(1)
const videoList = ref([])
const collect = ref(0)
const getSameVideo = async() => {
    uni.showLoading({
        title: '请稍后',
        mask: false
    })
    if(!cate2Id.value)return uni.showToast({title:'请检查网络后重试',icon:'none'})
    const res = await httpRequest('/api/popVideoByCate2Id','POST',{
        cate1Id:cate1Id.value,
        cate2Id:cate2Id.value,
        pageNum:pageNum.value,
        pageSize:10
    })
    console.log(res);
    videoList.value = [...videoList.value,...res.data.dataList]
    if(res.data.dataList.length<10){
        const index = uni.getStorageSync('index')
        cate1Id.value = uni.getStorageSync('shop')[index].shopCate1Obj.shopCate1Id
        if(!cate1Id.value)return uni.showToast({title:'请检查网络后重试',icon:'none'})
        const res = await httpRequest('/api/popVideoByCate2Id','POST',{
        cate1Id:cate1Id.value,
        cate2Id:cate2Id.value,
        pageNum:pageNum.value,
        pageSize:10
    })
    uni.hideLoading()
    console.log(res);
    videoList.value = [...videoList.value,...res.data.dataList]
    pageNum.value++
    }else{
        uni.hideLoading()
        pageNum.value++
    }
}
getSameVideo()
onReachBottom(()=>{
    getSameVideo()
})
const goSame = (i) => {
    uni.navigateTo({ url: `/pageA/index/same?videoObj=${JSON.stringify(videoList.value[i])}` })
}
const getNum = (num) => {
    if(Number(num)>10000)return `${(Number(num)/10000).toFixed(1)}万`
    if(Number(num)>100000000)return `${(Number(num)/100000000).toFixed(1)}亿`
    return num
}
</script>

<template>
  <view class="page">
    <video 
    custom-cache=" { {false}}"
    class="items" 
    :src="item.popVideoUrl"
    v-for="item,index in videoList"
    :key="index"
    :show-center-play-btn="false"
    :controls="false"
    @click="goSame(index)"
    >
        <view class="plays">
            <image style="width: 48rpx;height: 48rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/movie_icon_bfliang.png" mode="" />
            <text>{{getNum(item.comment)}}播放量</text>
        </view>
    </video>
  </view>
</template>

<style lang="scss" scoped>
    .page{
        box-sizing: border-box;
        padding: 30rpx;
        min-height: 1500rpx;
        .items{
            position: relative;
            width: 336rpx;
            height: 576rpx;
            border-radius: 16rpx;
            &:nth-child(2n){
                margin-left: 18rpx;
            }
            .plays{
                position: absolute;
                bottom: 0;
                left: 0;
                display: flex;
                align-items: center;
                width: 100%;
                height: 72rpx;
                background-color: rgb(255,55,71);
                border-radius: 0 0 16rpx 16rpx;
                font-size: 24rpx;
                color: #fff;
                font-weight: 700;
                padding-left: 12rpx;
            }
        }
    }
</style>
